
<template>
  <el-form
    ref="form"
    v-bind="config.formProps"
    :model="model"
    :rules="config.rules"
  >
    <template v-if="config.formProps.row == true">
      <el-row v-bind="config.formProps">
        <el-col
          :span="12"
          v-for="(item, index) in props.config.formItems"
          :key="index"
        >
          <el-form-item v-bind="item.props" @click="formItemClick(item)">
            <component
              ref="son"
              :is="item.name"
              :options="item.options"
              :elProps="item.elProps"
              v-model="model[item.props.prop]"
            >
            </component>
          </el-form-item>
        </el-col>
      </el-row>
    </template>
    <template v-else>
      <div v-for="(item, index) in props.config.formItems" :key="index">
        <el-form-item v-bind="item.props" @click="formItemClick(item)">
          <component
            ref="son"
            :is="item.name"
            :options="item.options"
            :elProps="item.elProps"
            v-model="model[item.props.prop]"
          >
          </component>
        </el-form-item>
      </div>
    </template>
        <el-form-item>
      <el-button @click="resetForm(form)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, onMounted, reactive, watch, watchEffect } from "vue";
import bus from "@/common/bus.js";

const props = defineProps({
  config: {
    type: Object,
    default: () => {},
  },
  echo: Object,
});
let  model = reactive({});
const form = ref(null);
const son = ref(null);
props.config.formItems.forEach((item) => {
  model[item.props.prop] = item.value;
});
// watch(() => props.echo,
//   (newval) => {
//     console.log(newval);
//     let objJson = JSON.parse(JSON.stringify(newval))
//     model = objJson;
//   },
//    {deep: true}
// );
// console.log( props.echo);
watchEffect(()=>{
  console.log( props.echo);
  if (props.echo) {
    for (let i in props.echo) {
      model[i] = props.echo[i];
    }
    //    let objJson = JSON.parse(JSON.stringify(props.echo))
    // model = objJson;
  }

})
// 提交
const submit = (cb) => {
  form.value.validate().then((res) => {
    cb(model);
    // bus.emit("DiologFromButton", model);
  });
};
const resetForm = (e) => {
 form.value.resetFields()
 console.log(model);
}

const formItemClick = (item) => {
  // console.log(item);
};
const asd = '123'
defineExpose({
  submit,resetForm,model,form,asd
});
</script>

<style lang='less' scope>
.el-form-item {
  margin-bottom: 0;
}
</style>
